// pages/hanziWrite/hanziWrite.js
//index.js
//获取应用实例
const { post } = require('../../utils/request')
const api = require('../../utils/api');
const app = getApp();
var baseWechatUrl = app.globalData.baseWechatUrl;
// 音频前缀
var audioSrcPrefix ="http://101.43.230.53:9000/test/zh-CN-YunyangNeural_"
// 默认音频
var defaultAudioPath ="http://101.43.230.53:9000/test/zh-CN-YunyangNeural_%E7%BF%B1.mp3";
import createHanziWriterContext from 'hanzi-writer-miniprogram';
//引入插件：微信同声传译
//const plugin = requirePlugin('WechatSI');
// import createHanziWriterContext from '../../miniprogram_npm/hanzi-writer-miniprogram/hanzi-writer-view'; 
Page({
  properties: {},
  data: {
    inputCharacter: '天',
    audioSrc:'http://101.43.230.53:9000/test/zh-CN-YunyangNeural_%E7%BF%B1.mp3' //

  },
  onLoad: function(options) {
    // 跟我读
    this.readCharacter();
    console.log("Do something initial when launch")
    this.drawCharacter();
    //拼音
    //this.pinyin();
    this.writerCtx.loopCharacterAnimation();
  },
  // 跟读
  readCharacter:function(){
    wx.playBackgroundAudio({
        dataUrl: this.data.audioSrc,
        title: '',
        coverImgUrl: ''
      })
    //创建内部 audio 上下文 InnerAudioContext 对象。
    this.innerAudioContext = wx.createInnerAudioContext();
    this.innerAudioContext.onError(function (res) {
      console.log(res);
      wx.showToast({
        title: '语音播放失败',
        icon: 'none',
      })
    }) 
  },
  // 画出文字
  drawCharacter:function() {
    /*    this.writerCtx = createHanziWriterContext({
          id: 'hz-writer',
          character:this.data.inputCharacter,
          page: this,
          radicalColor: '#1abc9c',//偏旁部首颜色
        });*/

        this.writerCtx = createHanziWriterContext({
            radicalColor: '#1abc9c',
            id: 'hz-writer',
            character: this.data.inputCharacter,
            page: this,
            charDataLoader:   (char, onLoad, onError) => {
                const VERSION = '2.0';
                const url = `http://localhost:18092/api/word/stroke/${this.data.inputCharacter}`;
                wx.request({
                  url,
                  header: {
                    'content-type': 'application/json',
                  },
                  success: (res) => {                          
                    onLoad(res.data);
                  },
                  fail: (res) => {
                }
                });
              },
            onLoadCharDataError:function(reason) {
                    wx.showToast({
                      title: '网络不佳',
                      duration: 700
              })},
            onLoadCharDataSuccess:function(data) {
               }
            });
            

  },
  // 输入框
  inputstrBtn:function(e){
    console.log("inputstrBtn被触发")
    this.writerCtx.hideCharacter();
    console.log(e.detail.value)
    var val = e.detail.value;
    this.setData({
        inputCharacter: val,
      });
    this.drawCharacter();
    this.writerCtx.showCharacter();
    this.writerCtx.loopCharacterAnimation();
  },

  //更新
  updateCharacter:function(e){
    this.writerCtx.hideCharacter();
    this.drawCharacter();
    this.writerCtx.showCharacter();
    this.writerCtx.loopCharacterAnimation();
  },
  
  //显示笔画
  showCharacter:function(e){
    this.writerCtx.showCharacter();
  },

  //隐藏笔画
  hideCharacter:function(e){
    this.writerCtx.hideCharacter();
  },

  //播放动画
  playAnimate:function(e){    
    this.writerCtx.loopCharacterAnimation();
  },

  //临摹
  copybook:function(e){
    this.writerCtx.quiz();
    var colorName ='#ff0'
    this.writerCtx.updateColor(colorName, colorVal, options);
  },
  // 跟我读-----------------------------------------------------start
  // 文字转语音
  wordYun:function (e) {
    var that = this;
    that.yuyinPlay();
  },
  
  //播放语音
  yuyinPlay: function (e) {
    if (this.data.src == '') {
      console.log(暂无语音);
      return;
    }
    this.innerAudioContext.src = this.data.audioSrc //设置音频地址
    this.innerAudioContext.play(); //播放音频
  },
  // 跟我读----------------------------------------------------end
  // 笔画
  readStrokes:function(){
    var character = "你"
    this.writerCtx.loadCharacterData(character, options = {})
  }
});
